<template>
    <div class="prduct">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(imgs, index) of gallery" :key="index">
                <img :src="imgs.img_url" alt="" />
            </van-swipe-item>
        </van-swipe>
        <div class="grow">
            <div class="pipai"> <img src="../assets/logo/2d0402ffcd52b3ec3b07422681c42a89.png" alt="">
                <span>网易自营品牌</span>
            </div>

            <div class="pipai"> <img src="../assets/logo/a03dd909803b9ac032eba58b7253a2f6.png" alt="">
                <span>30天无忧退货</span>
            </div>
            <div class="pipai"> <img src="../assets/logo/eb61ee48e8942dbd1784c9ee75ebe955.png" alt="">
                <span>48小时快速退款</span>
            </div>
        </div>
        <!-- title简绍 -->
        <div class="info">
            <div class="name">
                <h3> {{info.name}}</h3>
            </div>
            <div class="goods_brief">{{info.goods_brief}}</div>
            <div class="retail_price prize"> {{info.retail_price | RMBformat}}</div>
        </div>
        <van-cell title="显示弹出层" is-link url="" @click="show" />
        <!-- 商品参数 -->
        <div class="attribute">
            <h3>商品参数</h3>
            <ul>
                <li v-for="(item,key) of attribute" :key="key">
                    <div class="name">{{item.name}}</div>
                    <div class="value">{{item.value}}</div>
                </li>
            </ul>
        </div>
        <!-- 大量图片 -->
        <div class="goods_desc" v-html="info.goods_desc"></div>
        <!-- 常见问题 -->
        <div class="common">
            <span></span>
            <h3>常见问题</h3>
        </div>
        <ul id="familiar" style="list-style: disc;" class="familiar">
            <li>
                <h3>购买运费如何收取？</h3>
                <p>单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费。 (港澳台地区需满</p>
            </li>
            <li>
                <h3>使用什么快递发货？</h3>
                <p>严选默认使用顺丰快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区（港澳台地区除</p>
            </li>
            <li>
                <h3>如何申请退货？</h3>
                <p>1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，</p>
            </li>
            <li>
                <h3>如何开具发票？</h3>
                <p>1.如需开具普通发票，请在下单时选择“我要开发票”并填写相关信息（APP仅限2.4.0及以</p>
            </li>
        </ul>
        <!-- 大家都在看 -->
        <div class="watching">
            <span></span>
            <h3>大家都在看</h3>
        </div>
        <productPage :pruductLi="goodsList"></productPage>
        <van-sku v-model="isshow" :sku="sku" :goods="goods" ref="sku" :hide-stock="sku.hide_stock" />
        <GoodTabbuy :cartNum="cartNum" @goCart="goCart"></GoodTabbuy>
    </div>

</template>

<script>
    import productPage from "../components/ProductPage"
    import GoodTabbuy from "../components/common/GoodTabbuy"
    import { getProducts, getToPic,getCart,postAddCart } from "../api/api"
    export default {
        name: 'YxProductdetail',
        components: { productPage, GoodTabbuy },
        data() {
            return {
                // SKu
                isshow:false,
                sku:{
                   tree:[],
                   hide_stock:false,
                   price:'0',
                   stock_num:0
                },
                goods:{
                  picture:""
                },
                //轮播图数据
                gallery: [],
                //title简绍
                info: [],
                // 商品参数
                attribute: {},
                // 商品产品
                goodsList: {},
                // 购物车数量
                cartNum: 0,
                productList:[]
            };
        },
        created() {
            getCart().then((res)=>{
                if(res.errno == 0){
                   this.cartNum = res.data.cartTotal.goodsCount
                }
            })
            getProducts({ id: this.$route.query.id }).then((res) => {
                if (res.errno == 0) {
                    let { gallery, info, attribute,productList} = res.data;
                    this.gallery = gallery;
                    this.info = info;
                    this.sku.price = info.retail_price;
                    this.sku.stock_num = info.goods_number;
                    this.goods.picture = info.list_pic_url
                    this.attribute = attribute
                    this.productList =productList
                    console.log(res)
                }

            }),
                getToPic({ id: this.$route.query.id }).then((res) => {
                    if (res.errno == 0) {
                        this.goodsList = res.data.goodsList;
                        console.log(this.goodsList)
                    }
                })
        },
        mounted() {
          
        },

        methods: {
            show(){
                this.isshow =!this.isshow
            },
            goCart(){
                // 如果sku展示的话 点击购物车 就跳到购物车页面
                // 如果sku没有展示的话 点击购物车 就展示sku
                if(this.isshow){
                    postAddCart({goodsId:this.$route.query.id,productId:this.productList[0].id,number:this.$refs.sku.getSkuData().selectedNum}).then((res)=>{
                             if(res.errno == 0){
                                this.cartNum = res.data.cartTotal.goodsCount
                                this.$toast.success("加入购物车成功");
                                setTimeout(()=>{
                                    this.$router.push({path:'/Shopping'})
                                },1500)
                             }
                    })
               
                  
                }else{
                    this.isshow = true; 
                }
            }
        },
    };
</script>

<style lang="scss" scoped>
    .watching {
        width: 100%;
        height: 40px;
        position: relative;
        font-size: 18px;
        background: #fff;

        span {
            width: 50%;
            height: 2px;
            background: #ccc;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        h3 {
            width: 30%;
            height: 40px;
            background: #fff;
            position: absolute;
            text-align: center;
            line-height: 40px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }

    #familiar {
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        background-color: white;

        li {
            margin: 0;
            padding: 0;
            margin-top: .4rem;
            border: 0;
            font-size: 100%;

            font: inherit;
            vertical-align: baseline;
        }

        h3 {
            padding-left: .4rem;
            position: relative;
        }

        h3::before {
            content: "";
            display: inline-block;
            width: .2rem;
            height: .2rem;
            position: absolute;
            top: 5px;
            left: 5px;
            background-color: red;
            border-radius: .2rem;
        }

        p {
            padding-left: .4rem;
        }
    }

    .common {
        width: 100%;
        height: 40px;
        position: relative;
        font-size: 18px;
        background: #fff;

        span {
            width: 50%;
            height: 2px;
            background: #ccc;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        h3 {
            width: 30%;
            height: 40px;
            background: #fff;
            position: absolute;
            text-align: center;
            line-height: 40px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }

    /deep/ .goods_desc {
        img {
            display: block;
            width: 100%;
        }
    }

    .attribute {
        padding: .2rem;
        margin-top: .2rem;
        background-color: #fff;

        h3 {
            font-size: .1638rem;
            line-height: .5rem;

        }

        ul {
            li {
                height: .8rem;
                line-height: .8rem;
                display: flex;
                align-items: center;
                background-color: #efefef;
                margin-bottom: .4rem;

                .name,
                .value {
                    line-height: .4rem;
                }

                .name {
                    width: 30%;
                    text-align: right;
                    margin-right: .1rem;
                }

                .value {
                    flex: 1;
                    font-size: .2rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                }
            }
        }
    }

    .prduct {
        background-color: #F2F1F2;
    }

    .van-cell {
        border-top: 1px solid #ccc;
    }

    .info {
        text-align: center;

        background-color: #fff;

        h3 {
            font-size: 20px;
            line-height: 1rem;
        }

        .goods_brief {
            color: #666666;
            line-height: .5rem;
        }

        .retail_price {
            font-size: 14px;
            line-height: .8rem;
        }
    }

    .grow {
        display: flex;
        height: .5rem;
        align-items: center;
        justify-content: space-around;
        background-color: #fff;


        img {
            width: .32rem;
            height: .32rem;
            transform: translateX(0.1rem);

        }

        span {
            font-size: .28rem;

        }
    }

</style>
